<template>
  <section class="categories" style="width: 100%;">
    <AnimateOnScroll animation="fade-up" :threshold="0.2">
      <h2>课程分类</h2>
    </AnimateOnScroll>
    <div class="category-cards">
      <div v-for="(item, index) in courseTypeStore.courseTypeList" :key="index" class="category-item">
        <AnimateOnScroll 
          animation="fade-right" 
          :threshold="0.2"
          :delay="index * 0.1" 
        >
          <div class="category-card" @click="handleCategoryClick(item.id)">
            <h3>{{ item.name }}</h3>
          </div>
        </AnimateOnScroll>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import AnimateOnScroll from './AnimateOnScroll.vue';
import { useCourseTypeStore } from '@/store';
import router from '@/router';

const courseTypeStore = useCourseTypeStore();

const handleCategoryClick = (id: number) => {
  router.push({ path: '/courses', query: { typeId: id } });
};

onMounted(() => {
  courseTypeStore.getCourseTypeList();
});
// 处理图片加载错误
const handleImageError = (e: Event) => {
  console.log(e);
  
//   img.src = 'https://via.placeholder.com/150x150/3498db/ffffff?text=' + encodeURIComponent(categories.value.find(c => c.image === img.getAttribute('src'))?.title || '分类');
};
</script>

<style scoped>
.categories {
  width: 100%;
  margin-bottom: 40px;
}

.categories h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: #333;
}

.category-cards {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

.category-item {
  flex: 0 0 22%;
  margin-bottom: 20px;
}

.category-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

@media (max-width: 768px) {
  .category-item {
    flex: 0 0 45%;
  }
}

@media (max-width: 480px) {
  .category-item {
    flex: 0 0 100%;
  }
}
</style> 